<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="../../css/mui.min.css" rel="stylesheet"/>
    <style>
    	.mui-preview-image.mui-fullscreen {
			position: fixed;
			z-index: 20;
			background-color: #000;
		}
		.mui-preview-header,
		.mui-preview-footer {
			position: absolute;
			width: 100%;
			left: 0;
			z-index: 10;
		}
		.mui-preview-header {
			height: 44px;
			top: 0;
		}
		.mui-preview-footer {
			height: 50px;
			bottom: 0px;
		}
		.mui-preview-header .mui-preview-indicator {
			display: block;
			line-height: 25px;
			color: #fff;
			text-align: center;
			margin: 15px auto 4;
			width: 100%;
			background-color: rgba(0, 0, 0, 0.4);
			border-radius: 12px;
			font-size: 16px;
		}
		.mui-preview-image {
			display: none;
			-webkit-animation-duration: 0.5s;
			animation-duration: 0.5s;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
		}
		.mui-preview-image.mui-preview-in {
			-webkit-animation-name: fadeIn;
			animation-name: fadeIn;
		}
		.mui-preview-image.mui-preview-out {
			background: none;
			-webkit-animation-name: fadeOut;
			animation-name: fadeOut;
		}
		.mui-preview-image.mui-preview-out .mui-preview-header,
		.mui-preview-image.mui-preview-out .mui-preview-footer {
			display: none;
		}
		.mui-zoom-scroller {
			position: absolute;
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
			-webkit-box-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			width: 100%;
			height: 100%;
			margin: 0;
			-webkit-backface-visibility: hidden;
		}
		.mui-zoom {
			-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
		}
		.mui-slider .mui-slider-group .mui-slider-item img {
			width: auto;
			height: auto;
			max-width: 100%;
			max-height: 100%;
		}
		.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
			width: 100%;
		}
		.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
			display: inline-table;
		}
		.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
			display: table-cell;
			vertical-align: middle;
		}
		.mui-preview-loading {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			display: none;
		}
		.mui-preview-loading.mui-active {
			display: block;
		}
		.mui-preview-loading .mui-spinner-white {
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -25px;
			margin-top: -25px;
			height: 50px;
			width: 50px;
		}
		.mui-preview-image img.mui-transitioning {
			-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
			transition: transform 0.5s ease, opacity 0.5s ease;
		}
		@-webkit-keyframes fadeIn {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@keyframes fadeIn {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@-webkit-keyframes fadeOut {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
		@keyframes fadeOut {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
    	
    	#header {
    		background: #498AF7;
    	}
    	#header a, #header h1 {
    		color: #fff;
    	}
    	.head-content {
    		padding: 0 15px;
    		height: 95px;
    	}
    	.head-image {
    		float: left;
    		width: 120px;
    		height: 80px;
    		background-image: url(images/muwu.jpg);
    		background-size: cover;
    		overflow: hidden;
    	}
    	.head-text {
    		list-style: none;
    		padding-left: 0;
    		margin: 0;
    		margin-left: 130px;
    	}
    	.head-text li {
    		line-height: 28px;
    	}
    	h2, p {
    		margin: 0;
    		font-weight: normal;
    	}
    	h2 {
    		font-size: 18px;
    		text-align: center;
    		color: #666;
    	}
    	
    	.mui-content>form {
    		background-color: #fff;
    	}
    	
    	.mui-content>form>h2 {
    		padding: 10px 0;
    	}
    	.mui-table-view::before {
    		display: none;
    	}
    	#doctor-info {
    		height: 58px;
    		line-height: 58px;
    	}
    	
    	#doctor-info::after {
    		left: 0;
    	}
    	
    	#doctor-info label {
    		line-height: 58px;
    	}
    	
    	.doctor-display {
    		display: inline-block;
    		width: 42px;
    		height: 42px;
    		border-radius: 21px;
    		background-image: url(images/muwu.jpg);
    		background-size: contain;
    		background-color: #999;
    		font-size: 28px;
    		line-height: 42px;
    		color: #fff;
    		text-align: center;
    		vertical-align: middle;
    	}
    	
    	.doctor-name {
    		margin-left: 10px;
    	}
    	
    	.personal-list li:nth-child(2) {
    		line-height: 30px;
    		position: relative;
    	}
    	
    	#qrcode-field {
    		position: relative;
    		height: 52px;
    	} 
    	
    	#qrcode-field label {
    		line-height: 52px;
    	}
    	
    	#qrcode {
    		position: absolute;
    		top: 6px;
    		right: 15px;
    		width: 40px;
    		height: 40px;
    	}
    	.mui-input-row label {
    		width: 60%;
    		font-size: 15px;
    		line-height: 40px;
    		padding: 0 15px;
    	}
    	.mui-input-row>a {
    		display: inline-block;
    		width: 40%;
    		line-height: 40px;
    		color: #000;
    		padding-right: 15px;
    		text-align: right;
    	}
    	.mui-input-row label~input {
    		width: 40%;
    		text-align: right;
    	}
    	
    	.mui-popover {
			height: 300px;
		}
		.mui-popover .mui-scroll-wrapper {
			margin: 0;
		}
		#equipment-desc {
			height: auto;
			padding-bottom: 10px;
			padding-left: 15px;
		}
		#equipment-desc label {
			float: none;
			padding: 0;
		}
		#equipment-desc textarea {
			float: none;
			display: block;
			width: 100%;
			padding: 0;
		}
		.mui-input-group .mui-input-row {
			height: auto;
		}
		.equipment-images {
			clear: left;
			padding-bottom: 10px;
			padding-left: 15px;
			/*padding-right: 15px;*/
		}
		.image-item {
			display: inline-block;
			width: 65px;
			height: 65px;
			border-radius: 5px;
			border: 1px solid #ccc;
			overflow: hidden;
			margin-right: 10px;
			margin-bottom: 10px;
			vertical-align: top;
		}
		.image-item img {
			width: 100%;
			vertical-align: middle;
		}
		
		.image-close {
			position: absolute;
			width: 18px;
			height: 18px;
			border-radius: 9px;
			background-color: red;
			color: #eee;
			font-weight: lighter;
			font-size: 12px;
			line-height: 18px;
			text-align: center;
			margin-left: 54px;
			margin-top: -8px;
			z-index: 1;
		}
		
		.image-add {
			display: inline-block;
			width: 65px;
			height: 65px;
			border-radius: 5px;
			border: 1px solid #eee;
			line-height: 65px;
			font-size: 64px;
			text-align: center;
			color: #eee;
			vertical-align: top;
		}
		
		
		form {
			text-align: center;
		}
		form>div, form>ul {
			text-align: left;
		}
		#save-btn {
			background-color: #007AFF;
			width: 95%;
			font-size: 20px;
			padding: 10px 0;
			border-radius: 10px;
			margin: 5px 0;
		}
    </style>
</head>
<body>
	<header class="mui-bar mui-bar-nav" id="header">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">设备详情</h1>
	</header>
	<div class="mui-content">
		<div class="head-content">
	    	<div class="head-image" id="head-image"></div>
	    	<ul class="head-text" id="head-text">
	    	</ul>
		</div>
		<div class="mui-popover" id="department">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view mui-table-view-radio" id="department-list">
					</ul>
				</div>
			</div>

		</div>
		<div class="mui-popover" id="inchargeurole-name">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view mui-table-view-radio" id="inchargeurole-name-list">
					</ul>
				</div>
			</div>

		</div>
		<div class="mui-popover" id="equipment-modelname">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view mui-table-view-radio" id="equipment-modelname-list">
					</ul>
				</div>
			</div>

		</div>
		<div class="mui-popover" id="equipment-specname">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view mui-table-view-radio" id="equipment-specname-list">
					</ul>
				</div>
			</div>
		</div>
		<form class="mui-input-group">
		</form>
	</div>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/mui.zoom.js"></script>
	<script src="../../js/mui.previewimage.js"></script>
	<script type="text/javascript" src="../../js/modify_equipment_detail.js" ></script>
	<script type="text/javascript" charset="utf-8">
		mui('.mui-scroll-wrapper').scroll();
    </script>
</body>
</html>